<!--下拉编辑框-->
<template>
    <el-select :ref="params.column.colDef.field + '_' + params.rowIndex" v-model="value" automaticDropdown
        default-first-option clearable :placeholder="selectProp.placeholder"
        @keydown.native="handleKeydown" @change="onChange">
        <el-option v-for="(item, index) in optionList" :key="index" :label="item[selectProp.optionLabel]" :value="item[selectProp.optionValue]">
        </el-option>
    </el-select>
</template>
<script>
import Vue from 'vue'
import { selectDictionaryAllByTypeCodes } from '@/api/system/table'

const defaultProp = {
    type: 'select',
    valueKey: 'value',
    optionLabel: 'label',
    optionValue: 'value',
    list: [],
    dictionaryCode: '',
    placeholder: '',
    rules: []
}

export default Vue.extend({
    name: 'SelectEditor',
    data() {
        return {
            value: "",
            selectProp: Object.assign({}, defaultProp),
            optionList: []
        }
    },
    beforeMount() {
        this.selectProp = Object.assign({}, defaultProp, this.params.column.colDef.cellEditorParams || {});
        if (this.selectProp.type === 'select') {
            if (this._.isArray(this.selectProp.list)) {
                this.optionList = this.selectProp.list.map(opt => {
                  opt[this.selectProp.optionLabel] = this.$t(opt[this.selectProp.optionLabel]);
                  return opt
                })
                console.log(this.optionList);
            } else if (this._.isFunction(this.selectProp.list)) {
                this.selectProp.list(this.params.node.data, this.params.rowIndex).then(res => {
                    this.optionList = Object.assign([], res.rows);
                })
            }
        } else if (this.selectProp.type === 'dictionary') {
            this.value = {
                dictionaryCode: this.params.data[this.params.column.colDef.field],
                dictionaryName: this.params.data[this.params.column.colDef.field + 'Value']
            };
            if (this._.isArray(this.selectProp.dictionaryCode)) {
                this.optionList = Object.assign([], this.selectProp.dictionaryCode);
            } else if (this._.isString(this.selectProp.dictionaryCode)) {
                selectDictionaryAllByTypeCodes([this.selectProp.dictionaryCode]).then(res => {
                    this.optionList = Object.assign([], res.rows[this.selectProp.dictionaryCode]);
                });
            }
        }
    },
    mounted() {
      if(this.params.value){
        this.value = this.params.list.find(opt => opt[this.selectProp.valueKey] == this.params.value)[this.selectProp.valueKey]||"";
      }
      this.$nextTick(() => {
        this.$refs[this.params.column.colDef.field + '_' + this.params.rowIndex] && this.$refs[this.params.column.colDef.field + '_' + this.params.rowIndex].focus()
      })
    },
    methods: {
        handleKeydown(event) {
            let KEY_LEFT = 37,
                KEY_UP = 38,
                KEY_RIGHT = 39,
                KEY_DOWN = 40,
                KEY_PAGE_UP = 33,
                KEY_PAGE_DOWN = 34,
                KEY_PAGE_HOME = 36,
                KEY_PAGE_END = 35,
                KEY_ENTER = 13,
                KEY_TAB = 9;

            let keyCode = event.keyCode;

            // 光标跳转
            if (keyCode === KEY_TAB || keyCode === KEY_ENTER) {
              this.params.api.tabToNextCell();
            }
        },
        tabToNext({ rowIndex, colKey, floating }) {
            let columnDefs = this.params.columnApi.getAllColumns();
            let rowTotal = this.params.api.getLastDisplayedRow();
            let rowPinned = this.params.column.colDef.pinned;
            let tabindex = this.params.tabindex || -1;
            let sameLineFlag = false;

            tabindex = tabindex + 1;
            for (let i = 0; i < columnDefs.length; i++) {
                let tmpColDef = columnDefs[i].colDef;
                if (tmpColDef.cellEditorParams && tmpColDef.cellEditorParams.tabindex === tabindex) {
                    sameLineFlag = true;
                    colKey = columnDefs[i].colId;
                    rowPinned = tmpColDef.pinned;
                    break;
                }
            }
            if (!sameLineFlag) {
                rowIndex++;
                tabindex = 1;
                let tmpCol = columnDefs.filter(obj => obj.colDef && obj.colDef.cellEditorParams && obj.colDef.cellEditorParams.tabindex === 1)[0];
                colKey = tmpCol.colId;
                rowPinned = tmpCol.colDef && tmpCol.colDef.pinned;
            }
            if (rowIndex <= rowTotal) {
                this.params.api.setFocusedCell(rowIndex, colKey);
                this.params.api.startEditingCell({
                    rowIndex: rowIndex,
                    colKey: colKey,
                    rowPinned: rowPinned
                });
            }
        },
        onChange() {
            this.params.api.tabToNextCell();
        },
        getValue() {
          return this.value;
        },
    }
})
</script>
